<template>
    <div>
     <a-tabs >
       <a-tab-pane key="1">
      <template #tab>
        <span>
          <BarChartOutlined />
          基础字段
        </span>
      </template>
      <div>
        
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="图标"
            >
              <a-input v-model:value="dataC.options.icon"></a-input>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="图标位置"
            >
               <a-select v-model:value="dataC.options.cardClass" placeholder="please select your icon Location">
                <a-select-option value="card_no">不显示</a-select-option>
                <a-select-option value="card_left">左侧</a-select-option>
                <a-select-option value="card_right">右侧</a-select-option>
               </a-select>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="图标颜色"
            >
               <a-select
                          v-model:value="dataC.options.iconColor"
                          style="width: 90px"
                          placeholder="图标颜色"
                        >
                          <a-select-option value="#FF5B57">
                            红色
                          </a-select-option>
                          <a-select-option value="#F59C1A">
                            橙色
                          </a-select-option>
                          <a-select-option value="#FAD500">
                            黄色
                          </a-select-option>
                          <a-select-option value="#32A932">
                            绿色
                          </a-select-option>
                          <a-select-option value="#90CA4B">
                            青色
                          </a-select-option>
                          <a-select-option value="#348FE2">
                            蓝色
                          </a-select-option>
                          <a-select-option value="#8753DE">
                            紫色
                          </a-select-option>
                        </a-select>
            </a-form-item>
           </a-col>
         </a-row>
         
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="标题"
            >
              <a-input v-model:value="dataC.options.cardTitle"></a-input>
            </a-form-item>
           </a-col>
         </a-row>
         
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="内容"
            >
              <a-input v-model:value="dataC.options.cardContent"></a-input>
            </a-form-item>
           </a-col>
         </a-row>
         
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="背景颜色"
            >
               <a-select
                          v-model:value="dataC.options.bgColor"
                          style="width: 90px"
                          placeholder="背景颜色"
                        >
                          <a-select-option value="#FF5B57">
                            红色
                          </a-select-option>
                          <a-select-option value="#F59C1A">
                            橙色
                          </a-select-option>
                          <a-select-option value="#FAD500">
                            黄色
                          </a-select-option>
                          <a-select-option value="#32A932">
                            绿色
                          </a-select-option>
                          <a-select-option value="#90CA4B">
                            青色
                          </a-select-option>
                          <a-select-option value="#348FE2">
                            蓝色
                          </a-select-option>
                          <a-select-option value="#8753DE">
                            紫色
                          </a-select-option>
                        </a-select>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="边框颜色"
            >
               <a-select
                          v-model:value="dataC.options.borderColor"
                          style="width: 90px"
                          placeholder="边框颜色"
                        >
                          <a-select-option value="#FF5B57">
                            红色
                          </a-select-option>
                          <a-select-option value="#F59C1A">
                            橙色
                          </a-select-option>
                          <a-select-option value="#FAD500">
                            黄色
                          </a-select-option>
                          <a-select-option value="#32A932">
                            绿色
                          </a-select-option>
                          <a-select-option value="#90CA4B">
                            青色
                          </a-select-option>
                          <a-select-option value="#348FE2">
                            蓝色
                          </a-select-option>
                          <a-select-option value="#8753DE">
                            紫色
                          </a-select-option>
                        </a-select>
            </a-form-item>
           </a-col>
         </a-row>
      </div>
       </a-tab-pane>
        <a-tab-pane key="2">
      <template #tab>
        <span>
          <BarChartOutlined />
          其他字段
        </span>
      </template>
      <div>
        <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="宽度"
            >
              <a-input-number v-model:value="dataC.options.cardWidth" :min="0"></a-input-number>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="图标尺寸"
            >
              <a-input-number v-model:value="dataC.options.iconSize" :min="0"></a-input-number>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="标题尺寸"
            >
              <a-input-number v-model:value="dataC.options.titleSize" :min="0"></a-input-number>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="标题颜色"
            >
              <a-select
                          v-model:value="dataC.options.titleColor"
                          style="width: 90px"
                          placeholder="标题颜色"
                        >
                          <a-select-option value="#FF5B57">
                            红色
                          </a-select-option>
                          <a-select-option value="#F59C1A">
                            橙色
                          </a-select-option>
                          <a-select-option value="#FAD500">
                            黄色
                          </a-select-option>
                          <a-select-option value="#32A932">
                            绿色
                          </a-select-option>
                          <a-select-option value="#90CA4B">
                            青色
                          </a-select-option>
                          <a-select-option value="#348FE2">
                            蓝色
                          </a-select-option>
                          <a-select-option value="#8753DE">
                            紫色
                          </a-select-option>
                        </a-select>
            </a-form-item>
           </a-col>
         </a-row>
        <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="内容尺寸"
            >
              <a-input-number v-model:value="dataC.options.contentSize" :min="0"></a-input-number>
            </a-form-item>
           </a-col>
         </a-row>
         <a-row>
            <a-col :span="12">
            <a-form-item
              :labelCol="{ span: 6 }"
              :wrapperCol="{ span: 18 }"
              label="内容颜色"
            >
               <a-select
                          v-model:value="dataC.options.contentColor"
                          style="width: 90px"
                          placeholder="内容颜色"
                        >
                          <a-select-option value="#FF5B57">
                            红色
                          </a-select-option>
                          <a-select-option value="#F59C1A">
                            橙色
                          </a-select-option>
                          <a-select-option value="#FAD500">
                            黄色
                          </a-select-option>
                          <a-select-option value="#32A932">
                            绿色
                          </a-select-option>
                          <a-select-option value="#90CA4B">
                            青色
                          </a-select-option>
                          <a-select-option value="#348FE2">
                            蓝色
                          </a-select-option>
                          <a-select-option value="#8753DE">
                            紫色
                          </a-select-option>
                        </a-select>
            </a-form-item>
           </a-col>
         </a-row>
      </div>
      </a-tab-pane>
     </a-tabs>
    </div>
</template>
<script>
import { reactive ,toRef } from 'vue'
import { BarChartOutlined } from '@ant-design/icons-vue'
export default {
    components:{
        BarChartOutlined
    },
    props:{
      data: {
        type: Object,
        default: Object,
      },
    },
    setup(props) {
        console.log(props.data)
        const dataC = toRef(props, 'data')
      


        return{
          dataC
        }
    },
}

</script>
